<template>
  <div class="h-full">
    <n-card class="shadow-sm rounded-4px">
      <n-form class="w-full" size="small" inline>
        <n-form-item label="日期:" label-placement="left">
          <n-date-picker v-model:value="range" type="daterange" clearable />
        </n-form-item>

        <n-form-item label="" label-placement="left">
          <n-button type="primary" :on-click="getWipDailySumData">
            <template #icon><icon-mdi-map-search-outline /></template>
            查询
          </n-button>
        </n-form-item>
      </n-form>
    </n-card>
    <n-card class="rounded-4px shadow-sm">
      <vxe-grid v-bind="WipOptions"></vxe-grid>
    </n-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import dayjs from 'dayjs';
import type { VxeGridProps } from 'vxe-table';
import { fetchWipDailyData } from '@/service';

const range = ref<[number, number]>([dayjs().startOf('month').valueOf(), Date.now()]);

const WipOptions = reactive<VxeGridProps>({
  border: true,
  maxHeight: '550px',
  size: 'mini',
  showFooter: true,
  align: null,
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'DATETIME',
      title: '日期',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'HOURTIME',
      title: '时间',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PRODUCTSPECNAME',
      title: '成品料号',
      width: '200',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      title: '工序在制品数量',
      children: [
        {
          field: 'R01',
          title: '上片'
        },
        {
          field: 'R03',
          title: '镀膜'
        },
        {
          field: 'R04',
          title: '点胶'
        },
        {
          field: 'R07',
          title: '微调'
        },
        {
          field: 'R08',
          title: '封焊'
        },
        {
          field: 'R11',
          title: '老化'
        },
        {
          field: 'R14',
          title: '测试'
        },
        {
          field: 'R99',
          title: '待入库'
        }
      ]
    },
    {
      field: 'SUMWIP',
      title: '合计'
    }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true,
    // zoom: true,
    custom: true
  },
  data: [],
  mergeCells: [],
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const getWipDailySumData = async () => {
  const result = await fetchWipDailyData(
    dayjs(range.value[0]).format('YYYY-MM-DD'),
    dayjs(range.value[1]).format('YYYY-MM-DD')
  );
  if (result.data) {
    WipOptions.data = result.data;
  }
};
</script>
